<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="item in chapterList" :key="item.chapterId">
        {{ item.chapterTitle }}
        {{ item.Timer }}
      </li>
    </ul>
    <div>
      <input type="input" v-model="chapter">
      <button @click="sub">提交</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  // props: {
  //   msg: String
  // },
  // components:{
  //   Helloworld
  // },
  data(){
    return{
      msg:'',
      chapterList:[],
      chapter:'this is a test'
    }
  },
  methods:{
    getList(){
      console.log("test");
      axios.get("http://localhost:3000/getlist").then((res)=>{
        let result = res.data
        console.log(result);
        this.chapterList = result
      })
    },
   sub(){
      console.log(this.chapter);
      axios.post("http://localhost:3000/sub",{
        "chapter":this.chapter
      }).then(res => {
        // console.log(res);
        if(res.data == 'ok'){
          let chapterObj = {
            chapterId:this.chapterList.length,
            chapterTitle:this.chapter,
            timer:'2023-03-03'
          }
          this.chapterList.push(chapterObj)
        }
      })
    }

  },
  mounted(){
    axios.get("http://localhost:3000/getdata").then((res)=>{
      this.msg = res.data
    })
    this.getList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
